<template>
  <view class="details-page">
    <view class="detail-nav">
      <view class="nav-head">
        <view class="head-title">{{dataList.category?dataList.category.name:''}}鉴定</view>
        <template v-for="ite,ind in statusList" :key="ind">
          <view v-if="ite.status == status" :style="{color: ite.nameColor}">{{ite.statusName}}</view>
        </template>
      </view>
      <view class="nav-content">
        <view class="content-order">
          <view class="order-img">
            <image :src="dataList.category?dataList.category.image:''" mode="" class="content-img"></image>
          </view>
          <view class="order-nav">
            <view class="nav-title">{{dataList.desc}}</view>
            <view class="nav-price">
              <view style="color:#666666; font-size: 28rpx;">实付</view>
              <view style="font-size: 24rpx;">￥</view>{{dataList.price}}
            </view>
          </view>
        </view>
        <view class="content-info">
          <view class="info-box" v-if="dataList.order_no">
            <view class="box-name">订单编号</view>
            <view class="box-label">{{dataList.order_no}}
              <view class="label-copy"></view>
              <view @click="oncopy">复制</view>
            </view>
          </view>
          <view class="info-box" v-if="status != '0' && dataList.pay_type">
            <view class="box-name">支付方式</view>
            <view class="box-label">{{payType}}</view>
          </view>
          <view class="info-box" v-show="dataList.pay_time">
            <view class="box-name">支付时间</view>
            <view class="box-label">{{dataList.pay_time}}</view>
          </view>
          <view class="info-box">
            <view class="box-name">下单时间</view>
            <view class="box-label">{{dataList.create_time}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-info">
      <view class="info-box">
        <view class="box-name">鉴宝专家</view>
        <view class="box-label">
          <image :src="dataList.expert?dataList.expert.avatar:''" mode="" class="box-img"></image>
          {{dataList.expert?dataList.expert.nickname:''}}
        </view>
      </view>
      <view class="info-box">
        <view class="box-name">鉴宝类型</view>
        <view class="box-label">{{dataList.category?dataList.category.name:''}}</view>
      </view>
    </view>
  </view>
  <template v-for="ite,ind in statusList" :key="ind">
    <view class="detail-btn" v-if="ite.status == status">
      <view class="btn-primary" v-if="ite.status <=0" @click.stop="onPrimary(ite.status)">
        {{ite.btnName[0]}}
      </view>
      <view class="btn-default" @click.stop="onDefault(ite.status,dataList.id)">
        {{ite.status >0 ?ite.btnName[0]:ite.btnName[1]}}
      </view>
    </view>
  </template>
  <payment-order :show="modalShow" v-if="payNumber && taskId" :taskId="taskId" :price="payNumber"
    @showClose="modalShow = false" @release="modalShow = false"></payment-order>
</template>

<script setup>
  import {
    orderInfo,
    taskCancel,
    taskDelete
  } from '../api.js'
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const id = ref()
  const status = ref()
  const dataList = ref({})
  const modalShow = ref(false)
  const payNumber = ref(0)
  const taskId = ref()
  const payType = ref()
  const statusList = ref([{
    status: 1,
    statusName: '鉴定中',
    nameColor: '#A4682F',
    btnName: ['取消订单'],
    btnColor: ['']
  }, {
    status: 0,
    statusName: '待付款',
    nameColor: '#F52020',
    btnName: ['继续付款', '取消订单'],
    btnColor: ['']
  }, {
    status: 2,
    statusName: '鉴定完成',
    nameColor: '#03A142',
    btnName: ['查看结果'],
    btnColor: ['']
  }, {
    status: -1,
    statusName: '已取消',
    nameColor: '#999999',
    btnName: ['重新鉴定', '删除订单'],
    btnColor: ['']
  }])

  onLoad((e) => {
    if (e && e.id) {
      id.value = e.id
      orderInfoApi()
    }
  })

  function oncopy() {
    uni.setClipboardData({
      data: dataList.value.order_no,
      success() {
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
      },
      fail() {
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });

  }

  function onPrimary(status) {
    if (status == '0') {
      payNumber.value = dataList.value.price
      modalShow.value = true
      taskId.value = dataList.value.id
    } else if (status == '-1') {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyRelease?id=${dataList.value.id}&expertId=${dataList.value.expert_id}`
      })
    }
  }

  function onDefault(status, id) {
    if (status == 0 || status == 1) {
      uni.showModal({
        title: "确定取消订单？",
        success(res) {
          if (res.confirm) {
            taskCancelApi(id)
          } else if (res.cancel) {
            return
          }
        }
      })
    } else if (status == 2) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${id}`
      })
    } else {
      uni.showModal({
        title: "确定删除订单？",
        success(res) {
          if (res.confirm) {
            taskDeleteApi(id)
          } else if (res.cancel) {
            return
          }
        }
      })
    }
  }
  const taskCancelApi = (async (id) => {
    const res = await taskCancel({
      task_id: id
    })
    if (res && res.code == 1) {
      uni.showToast({
        title: "订单取消成功",
        icon: 'none'
      })
      orderInfoApi()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  const taskDeleteApi = (async (id) => {
    const res = await taskDelete({
      task_id: id
    })
    if (res && res.code == 1) {
      uni.showToast({
        title: "订单删除成功",
        icon: 'none'
      })
      uni.navigateBack(-1)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  const orderInfoApi = (async () => {
    const res = await orderInfo({
      task_id: id.value
    })
    if (res && res.code === 1) {
      dataList.value = res.data
      payType.value = res.data.pay_type ===1? '支付宝支付':res.data.pay_type ===2?'微信支付':'余额支付'
      status.value = res.data.status
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
</script>

<style lang="scss" scoped>
  .details-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;

    .detail-nav {
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 0 30rpx;

      .nav-head {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 500;
        border-bottom: 2rpx solid #EBEBEB;

        .head-title {
          color: #333333;

        }

      }

      .nav-content {
        width: 100%;
        display: flex;
        flex-direction: column;

        .content-order {
          width: 100%;
          height: 230rpx;
          display: flex;
          align-items: center;
          border-bottom: 2rpx solid #EBEBEB;

          .order-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            border: 2rpx solid #EBEBEB;
            display: flex;
            align-items: center;
            justify-content: center;

            .content-img {
              height: 142rpx;
              width: 142rpx;
            }
          }

          .order-nav {
            display: flex;
            flex-direction: column;
            margin-left: 20rpx;

            .nav-title {
              font-size: 30rpx;
              font-weight: 400;
              color: #333;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .nav-price {
              display: flex;
              font-size: 40rpx;
              font-weight: 500;
              color: #333333;
              margin-top: 24rpx;
              align-items: baseline;
            }
          }
        }

        .content-info {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 18rpx 0;

          .info-box {
            height: 64rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .box-name {
              font-size: 28rpx;
              font-weight: 400;
              color: #666;

            }

            .box-label {
              font-size: 28rpx;
              font-weight: 400;
              color: #333;
              display: flex;
              align-items: center;

              .label-copy {
                width: 2rpx;
                height: 24rpx;
                background-color: #ccc;
                margin: 0 16rpx;
              }
            }
          }
        }
      }
    }

    .detail-info {
      margin-top: 24rpx;
      width: 690rpx;
      height: 164rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 30rpx;
      justify-content: space-between;

      .info-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .box-name {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;

        }

        .box-label {
          font-size: 28rpx;
          font-weight: 400;
          color: #333;
          display: flex;
          align-items: center;

          .box-img {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            margin-right: 8rpx;
          }
        }
      }
    }
  }

  .detail-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112rpx;
    background: #FFFFFF;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    box-sizing: border-box;
    padding: 0 40rpx;

    .btn-default {
      width: 176rpx;
      height: 64rpx;
      border-radius: 32rpx;
      background: #FFFFFF;
      border: 2rpx solid #CCCCCC;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16rpx;
    }

    .btn-primary {
      width: 176rpx;
      height: 64rpx;
      border-radius: 32rpx;
      background: #A4682F;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16rpx;
      border: 2rpx solid #CCCCCC;
    }


  }
</style>